<template>
  <div ref="testdiv">
    <el-row :gutter="2" ref="headOperation">
      <el-col :span="24">
        <el-switch
          style="display: block"
          v-model="manualSw"
          active-color="#ff4949"
          inactive-color="#13ce66"
          active-text="手动查询"
          inactive-text="自动更新"
          @change="manualSwOnChange"
        >
        </el-switch>
      </el-col>
      <el-col :span="5"
        ><el-input
          placeholder="型号"
          v-model="selectType"
          clearable
          size="mini"
        >
        </el-input
      ></el-col>
      <el-col :span="3"
        ><el-select
          v-model="selectJudge"
          clearable
          size="mini"
          placeholder="判定"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :sm="15" :md="3" :lg="3"
        ><el-select
          v-model="selectDirection"
          clearable
          size="mini"
          placeholder="排序"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :sm="13" :md="13" :lg="9"
        ><el-date-picker
          v-model="selectDate"
          type="datetimerange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker
      ></el-col>
      <el-col :span="2"
        ><el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          :disabled="!manualSw"
          @click="serchOnClick"
          >查询</el-button
        ></el-col
      >
      <el-col :span="2"
        ><el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="!manualSw"
          @click="deleteOnClick"
          >删除</el-button
        ></el-col
      >
      <el-col :span="2">
        <button @click="test">test</button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      :height="table_height"
      :row-style="{ height: table_header_height }"
      :cell-style="{ padding: '0px' }"
      :header-row-style="{ height: table_row_height }"
      :header-cell-style="{ padding: '0px' }"
      stripe
      border
      @selection-change="handleSelectionChange"
      :empty-text="loadingText()"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="测量时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.timeStamp | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="产品型号" width="120"/>
      <el-table-column prop="height" label="高度" width="90" />
      <el-table-column
        prop="heightLevel"
        label="高度档次"
        label-class-name="testlabel"
        width="70"
      />
      <el-table-column prop="grooveWidth" label="槽宽" width="90" />
      <el-table-column
        prop="grooveWidthLevel"
        label="槽宽档次"
        label-class-name="testlabel"
        width="70"
      />
      <el-table-column prop="innerDiameter" label="内径" width="90" />
      <el-table-column
        prop="innerDiameterLevel"
        label="内径档次"
        label-class-name="testlabel"
        width="70"
      />
      <el-table-column prop="totalJudge" label="综合判定" />
    </el-table>
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      background
      layout="total,sizes, prev, pager, next,jumper"
      :total="totalDataCount"
      ref="bottomOperation"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectDate: [],
      selectType: "",
      manualSw: false,
      params: {},
      options1: [
        {
          value: "OK",
          label: "OK",
        },
        {
          value: "NG",
          label: "NG",
        },
      ],
      selectJudge: "",
      options2: [
        {
          value: "DESC",
          label: "降序",
        },
        {
          value: "ASC",
          label: "升序",
        },
      ],
      selectDirection: "",
      tableData: [],
      totalDataCount: 0,
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      refreshTimer: null,
      loading: true,
      table_height: 600,
      table_header_height: "32px",
      table_row_height: "32px",
    };
  },
  created() {},
  mounted() {
    this.manualSwOnChange(this.manualSw);

    this.$nextTick(() => {
      this.table_height = this.tableHeight();
      let total_height = this.table_height;
      let header_height = parseInt(this.table_header_height);
      let row_height = parseInt(this.table_row_height);
      this.pageSize = Math.floor((total_height - header_height) / row_height);
      // console.log(
      //   `total:${total_height},header:${header_height},row:${row_height}`
      // );
    });
  },
  destroyed() {
    if (this.refreshTimer) clearInterval(this.refreshTimer);
  },
  methods: {
    test() {
      // let mainHeight = this.$parent.$el.offsetHeight;
      // let headHeight = this.$refs.headOperation.$el.offsetHeight;
      // let bottomHeight = this.$refs.bottomOperation.$el.offsetHeight;

      // this.$message({
      // showClose: true,
      // message: `headHeight:${headHeight},bottomHeight:${bottomHeight}`
      //   message: `main height:${mainHeight},head:${headHeight},bottom:${bottomHeight},value:${mainHeight-headHeight-bottomHeight}`,
      // });
      // console.log(`height:${mainHeight - headHeight - bottomHeight}`);
      // console.log(this.$refs.multipleTable.$el.style);
      // console.log(this.$refs.multipleTable.$el);
      // let total_height = parseInt(this.$refs.multipleTable.$el.style.height);
      // let header_height = parseInt(this.table_header_height);
      // let row_height = parseInt(this.table_row_height);
      // this.pageSize = Math.floor((total_height - header_height) / row_height);
      // console.log(`size:${this.tableHeight()}`);
      this.table_height = 400;
    },

    renderHeader(h, { column }) {
      let header = column.label.split(" ");
      return [h("p", [h("p", {}, header[0]), h("span", {}, header[1])])];
    },

    tableHeight() {
      let mainHeight = this.$parent.$el.offsetHeight;
      // console.log('123', this.$refs.headOperation);
      let headHeight = this.$refs.headOperation.$el.offsetHeight;
      let bottomHeight = this.$refs.bottomOperation.$el.offsetHeight;
      // console.log(mainHeight);
      return mainHeight - headHeight - bottomHeight;

      // return 400
    },

    loadingText() {
      if (this.loading) return "玩命加载中";
      else return "暂无数据";
    },

    getRecord(params) {
      this.loading = true;
      params.measureType = "vat";
      params.page = this.currentPage;
      params.perpage = this.pageSize;
      this.$http({
        method: "get",
        url: "/record",
        params: params,
        headers: {},
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.records;
        this.totalDataCount = res.data.total;
      });
    },

    manualSwOnChange(val) {
      // console.log(val);
      if (val) {
        if (this.refreshTimer) clearInterval(this.refreshTimer);
      } else {
        this.refreshTimer = setInterval(() => {
          this.params = {};
          var startTime =
            new Date(new Date().toLocaleDateString()).getTime() -
            24 * 60 * 60 * 1000; // 当天0点
          var endTime =
            new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1; // 当天23:59
          this.params.fliter_by_time = `${startTime}_${endTime}`;
          this.getRecord(this.params);
        }, 1000);
      }
    },

    serchOnClick() {
      this.params = {};
      if (this.selectType) this.params.type = this.selectType;
      if (this.selectJudge) this.params.fliter_by_judge = this.selectJudge;
      if (this.selectDirection) this.params.order = this.selectDirection;
      if (this.selectDate.length == 2) {
        var startTime = new Date(this.selectDate[0]).getTime();
        var endTime = new Date(this.selectDate[1]).getTime();
        if (startTime && endTime)
          this.params.fliter_by_time = `${startTime}_${endTime}`;
      }
      this.currentPage = 1;
      this.getRecord(this.params);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    deleteOnClick() {
      if (this.multipleSelection.length > 0) {
        var ids = this.$linq
          .from(this.multipleSelection)
          .select("x=>x.id")
          .toArray();
        this.$http({
          method: "delete",
          url: "/record",
          params: {},
          data: { measureType: "vat", ids: ids },
        }).then((res) => {
          if (res.status == 200) {
            // console.log("删除成功");
            var remain = this.$linq
              .from(this.tableData)
              .except(this.multipleSelection)
              .toArray();
            this.tableData = remain;
          }
        });
      }
    },
  },

  watch: {
    currentPage() {
      this.getRecord(this.params);
    },
    pageSize() {
      this.getRecord(this.params);
    },
  },

  // computed: {
  //   testHeight: function () {
  //     let mainHeight = this.$parent.$el.offsetHeight;
  //     let headHeight = this.$refs.headOperation.$el.offsetHeight;
  //     let bottomHeight = this.$refs.bottomOperation.$el.offsetHeight;
  //     return `${mainHeight - headHeight - bottomHeight}px`;
  //   },
  // },

  filters: {
    formatDate: function (value) {
      let date = new Date(Number(value));
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
};
</script>

<style>
.testlabel{
  font-size: 9px;
}
</style>